<template>
	<div class="madp-statistical">
		<basic-container>
			<div class="madp-common-title">群成员统计数据</div>
			<statistics-card :cardInfo="cardInfo" :cardData="statisticalData" />
		</basic-container>
		<basic-container>
			<div class="madp-common-title">趋势图</div>
			<div class="madp-type-wrapper">
				<el-date-picker
					v-model="searchDate"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
					:picker-options="pickerOptions"
				></el-date-picker>
				<el-button class="madp-type" :type="type === '1' ? 'primary' : ''" @click="changeType('1')">按日</el-button>
				<el-button class="madp-type" :type="type === '2' ? 'primary' : ''" @click="changeType('2')">按周</el-button>
				<el-button class="madp-type" :type="type === '3' ? 'primary' : ''" @click="changeType('3')">按月</el-button>
			</div>
			<div>
				<p>
					这段时间里，该群共新增成员数
					{{ statisticalData.addNumRange }} 人，成员退群 {{ statisticalData.outNumRange }} 人
				</p>
			</div>
			<div id="statisticalECharts" style="width: 100%; height: 400px; margin: 30px auto"></div>
			<div class="madp-horizontal-divider"></div>
			<div>
				<div class="madp-common-title">详细数据</div>
				<div class="madp-common-mt">
					<el-table
						:header-cell-style="{
							background: 'rgb(255, 191, 191)',
							color: 'rgb(44,44,44)',
						}"
						:data="tableData"
						style="width: 100%"
					>
						<el-table-column prop="time" align="center" label="时间"></el-table-column>
						<el-table-column prop="addNum" align="center" label="新增成员数"></el-table-column>
						<el-table-column prop="outNum" align="center" label="退群人数"></el-table-column>
						<el-table-column prop="total" align="center" label="当前成员数"></el-table-column>
						<el-table-column prop="outTotal" align="center" label="累计退群成员数"></el-table-column>
					</el-table>
					<div class="madp-table-page">
						<el-pagination
							background
							:current-page="page.currentPage"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:page-sizes="[10, 20, 30, 50, 100]"
							:page-size="page.pageSize"
							layout="total, prev, pager, next, jumper"
							:total="page.total"
							style="float: right"
						></el-pagination>
					</div>
				</div>
			</div>
		</basic-container>
	</div>
</template>

<script>
import { getLineChart, getStatisticsList } from '@/api/customer-group/group-list';
import StatisticsCard from '@/components/statistics-card/';
const eCharts = require('echarts');
export default {
	name: 'statistical',
	props: ['workRoomId'],
	components: {
		StatisticsCard,
	},
	data() {
		return {
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
			},
			statisticalData: {
				addNum: 0,
				outNum: 0,
				total: 0,
				outTotal: 0,
				addNumRange: 0,
				outNumRange: 0,
			},
			searchDate: [],
			type: '2',
			option: {
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: ['新增成员', '离开成员'],
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: [],
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						name: '新增成员',
						type: 'line',
						// stack: '总量',
						data: [],
					},
					{
						name: '离开成员',
						type: 'line',
						// stack: '总量',
						data: [],
					},
				],
			},
			tableData: [],
			myECharts: null,
			page: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
			},
			cardInfo: [
				{
					label: '今日新增成员数',
					key: 'addNum',
					color: '#FFD700',
				},
				{
					label: '今日退群成员数',
					key: 'outNum',
					color: '#FF8C00',
				},
				{
					label: '当前群成员数',
					key: 'total',
					color: '#90EE90',
				},
				{
					label: '累计退群成员数',
					key: 'outTotal',
					color: '#00CED1',
				},
			],
		};
	},
	mounted() {
		this.initECharts();
		this.getChart(this.type);
		this.getList(this.page);
	},
	methods: {
		goBack(val) {
			this.$emit('goBack', val);
		},
		//列表
		getList(page, params) {
			let obj = Object.assign(
				{
					type: this.type,
					workRoomId: this.workRoomId,
					current: page.currentPage,
					size: page.pageSize,
					startTime: this.searchDate[0],
					endTime: this.searchDate[1],
				},
				params,
			);
			getStatisticsList(obj).then((res) => {
				if (res.data.code === 0) {
					this.tableData = res.data.data.records;
					this.page.total = res.data.data.total;
				}
			});
		},
		//获取折线图数据
		getChart(type, params) {
			let obj = Object.assign({ type: type, workRoomId: this.workRoomId }, params);
			getLineChart(obj).then((res) => {
				if (res.data.code === 0) {
					Object.assign(this.statisticalData, res.data.data);
					//数据拆分
					let time = [],
						addNum = [],
						outNum = [];
					this.statisticalData.list.forEach((item) => {
						time.push(item.time);
						addNum.push(item.addNum);
						outNum.push(item.outNum);
					});
					this.option.xAxis.data = time;
					this.option.series = this.option.series.map((item) => {
						item.name === '新增成员' ? (item.data = addNum) : (item.data = outNum);
						return item;
					});
					this.myECharts.setOption(this.option);
				}
			});
		},
		changeType(type) {
			if (type === '1' && this.searchDate.length > 0) {
				let startTime = this.searchDate[0],
					endTime = this.searchDate[1];
				this.type = type;
				this.getChart(type, { startTime, endTime });
				this.getList(this.page, { startTime, endTime });
				return;
			} else if (type === '1') {
				this.$message({
					type: 'error',
					message: '按日查询请选择日期',
				});
				return;
			} else {
				this.searchDate = [];
				this.type = type;
				this.getChart(type);
				this.getList(this.page);
			}
		},
		//初始化 eCharts
		initECharts() {
			this.myECharts = eCharts.init(document.getElementById('statisticalECharts'));
			this.myECharts.setOption(this.option);
		},
		handleSizeChange(pageSize) {
			this.page.pageSize = pageSize;
			this.getList(this.page);
		},
		handleCurrentChange(currentPage) {
			this.page.currentPage = currentPage;
			this.getList(this.page);
		},
	},
};
</script>

<style scoped lang="scss">
.madp-statistical {
	padding-top: 35px;
	.madp-number-box {
		height: 120px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.madp-number {
			width: 23%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10px;
			color: #fff;

			h1 {
				font-size: 24px;
				color: #fff;
			}
		}

		.madp-one {
			background: #40a9ff;
		}

		.madp-two {
			background: #fcc71b;
		}

		.madp-thr {
			background: #8f8aff;
		}

		.madp-four {
			background: #f9688e;
		}
	}

	.madp-type-wrapper {
		margin: 20px 0;

		.madp-type {
			margin-left: 20px;
		}
	}
}
.madp-horizontal-divider {
	width: 100%;
	height: 4px;
	margin: 20px 0;
	background-color: #f0f2f5;
}
/deep/ .el-date-editor .el-range-separator {
	width: 25px !important;
}
.madp-common-title {
	font-size: 16px;
	font-weight: bold;
}
.madp-common-mt {
	margin-top: 20px;
}
.madp-table-page {
	display: flex;
	justify-content: flex-end;
	padding: 10px;
}
</style>
